<template>
    <div class="itemWrap ">
        <template v-if="item.componentType == 'TextNote'">
            <div class="itemWrap-text">
                <a-space align="start">
                    <div class="numberTitle" v-if="indexNum >= 0">{{ `${indexNum + 1}` }}</div>
                    <div v-html="htmlFormat(item.value)"></div>
                </a-space>
            </div>
        </template>
        <template
            v-else-if="['DDDateField', 'TextField', 'NumberField', 'DDSelectField', 'TextareaField', 'ExternalContactField', 'PhoneField', 'InnerContactField'].includes(item.componentType)">
            <div>
                <a-row>
                    <a-col :span="24" class="itemWrap-title">
                        <a-space align="start">
                            <div class="numberTitle">{{ `${indexNum + 1}` }}</div>
                            <span class="itemWrap-title-name">{{ item.name }}</span>
                        </a-space>
                    </a-col>
                    <a-col :span="24" class="itemWrap-subTitle">{{ item.value }}</a-col>
                </a-row>
            </div>
        </template>
        <template v-else-if="item.componentType == 'DDDateField'">
            <div>
                <a-row>
                    <a-col :span="24">
                        <a-space align="start">
                            <div class="numberTitle">{{ `${indexNum + 1}` }}</div>
                            {{ item.name }}
                        </a-space>
                    </a-col>
                    <a-col :span="24" class="itemWrap-subTitle">{{ item.value }}</a-col>
                </a-row>
            </div>
        </template>
        <template v-else-if="item.componentType == 'TableField'">
            <div class="itemWrap-table">
                <a-row :gutter="[0, 4]">
                    <a-col :span="24" class="itemWrap-title">
                        <a-space align="start">
                            <div class="numberTitle">{{ `${indexNum + 1}` }}</div>
                            <span class="itemWrap-title-name">{{ item.name }}</span>
                        </a-space>
                    </a-col>
                    <a-col :span="24" class="itemWrap-tableWrap itemWrap-subTitle">
                        <a-table :columns="tableObj.columns" :data-source="tableObj.data"
                            :scroll="{ x: 'max-content', }" :pagination="false" size="small" :bordered="true">
                            <div slot="img" slot-scope="text">
                                <viewer>
                                    <a-row :gutter="[8, 8]"
                                        style="overflow-y: hidden;width: 100%;max-width: 300px;overflow-x: auto;">
                                        <a-col :span="8" v-for="(src, index) of imgStrinFormat(text)" :key="index">
                                            <img :src="src" class="img" />
                                        </a-col>
                                    </a-row>
                                </viewer>
                            </div>
                        </a-table>
                    </a-col>
                </a-row>
            </div>
        </template>
        <template v-else-if="item.componentType == 'DDMultiSelectField'">
            <div>
                <a-row>
                    <a-col :span="24" class="itemWrap-title">
                        <a-space align="start">
                            <div class="numberTitle">{{ `${indexNum + 1}` }}</div>
                            <span class="itemWrap-title-name">{{ item.name }}</span>
                        </a-space>
                    </a-col>
                    <a-col :span="24" class="itemWrap-subTitle">{{ item.value }}</a-col>
                </a-row>
            </div>
        </template>
        <template v-else-if="item.componentType == 'DDPhotoField'">
            <div>
                <a-row :gutter="[0, 4]">
                    <a-col :span="24" class="itemWrap-title">
                        <a-space align="start">
                            <div class="numberTitle">{{ `${indexNum + 1}` }}</div>
                            <span class="itemWrap-title-name">{{ item.name }}</span>
                        </a-space>
                    </a-col>
                    <a-col :span="24" class="itemWrap-subTitle itemWrap-DDPhotoField">
                        <viewer>
                            <a-space align="start">
                                <div class="infoImg" v-for="(src, index) of photoF(item.value)" :key="index">
                                    <img style="width: 100%;height: 100%;" :src="src" :key="index" />
                                </div>
                            </a-space>
                        </viewer>
                    </a-col>
                </a-row>
            </div>
        </template>
        <template v-else-if="item.componentType == 'SignatureField'">
            <div>
                <a-row :gutter="[0, 4]">
                    <a-col :span="24" class="itemWrap-title">
                        <a-space align="start">
                            <div class="numberTitle">{{ `${indexNum + 1}` }}</div>
                            <span class="itemWrap-title-name">{{ item.name }}</span>
                        </a-space>
                    </a-col>
                    <a-col :span="24" class="itemWrap-signImg itemWrap-subTitle">
                        <ShowBase :value="item.value"></ShowBase>
                        <!-- <viewer>
                            <a-space align="start">
                                <div class="infoImg">
                                    <img style="width: 100%;height: 100%;" :src="item.value" />
                                </div>
                            </a-space>
                        </viewer> -->
                    </a-col>
                </a-row>
            </div>
        </template>
    </div>
</template>

<script>
import { tableFormater } from './js';
import ShowBase from '@/components/ShowBase/ShowBase';
export default {
    name: 'ItemType',
    components: {
        ShowBase,
    },
    props: {
        item: {
            type: Object,
        },
        indexNum: {
            type: [String, Number],
        }
    },
    data() {
        return {
        }
    },
    methods: {
        photoF(i) {
            return i;
        },
        imgStrinFormat(i) {
            let res = [];
            if (Array.isArray(i)) {
                res = i;
            } else {
                res = JSON.parse(i);
            }
            return res;

        },
        htmlFormat(str){
            return str.replace(/\n/g, "<br>");
        }
    },
    mounted() {
        if (this.item.componentType == 'TableField') {
        }
    },
    computed: {
        tableObj() {
            let res = tableFormater(this.item.componentType, this.item);
            return res;
        },
    }
}
</script>

<style lang="less" scoped>
.AlibabaPuHuiTi {
    font-family: AlibabaPuHuiTi;
}

.itemWrap {
    width: 100%;
    height: 100%;


    &-text {
        color: red;
    }

    &-title {
        color: #666666;

        &-name {
            font-weight: 560;
            font-size: 16px;
            margin-left: -12px;
            color: #007AFF;
        }
    }

    &-subTitle {
        font-size: 15px;
        color: #222222;
        padding-left: 14px;
    }

    &-tableWrap {
        padding: 0px 12px;

        ::v-deep(.ant-table-thead) {
            background: rgb(245, 247, 250);
        }
    }

    .img {
        width: 40px;
    }

    .infoImg {
        width: 120px;
    }

    &-signImg {
        width: 120px;
    }

    .numberTitle {
        border: 2px solid #007AFF;
        width: 24px;
        height: 22px;
        border-radius: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        // color: #007AFF;
        // padding-right: 1px;
        display: block;
        margin-right: 8px;
        text-align: center;
        padding-bottom: 20px;
    }

    &-DDPhotoField {
        overflow-x: auto;
    }
}
</style>